// 1.导入router
import router from '@/router'
import store from '@/store'
// 目标：实现加载条
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
// 修改一下加载条的背景色
import titleConfig from '@/settings'
import getPageTitle from '@/utils/get-page-title'

// 白名单 ，放一些不需要登录就能访问的页面
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
  NProgress.start()
  const token = store.getters.token
  // 有token的情况
  if (token) {
    if (to.path === '/login') {
      // 在beforeEach内部发生了重定向 是不会走afterEach
      next({
        path: '/'
      })
      NProgress.done()
    } else {
      // store.commit("")
      // beforeEach 是在每次路由跳转时都会进行 beforeEach内部的代码
      // 所以咱们getUserInfo这个接口 只要在每次路由跳转后都会请求一次
      // 只需要判断vuex中userInfo是否有数据 如果没有数据才调用user/getUserInfo
      const userInfo = store.state.user.userInfo // 需要判断userInfo中是否有数据
      if (Object.keys(userInfo).length <= 0) {
        store.dispatch('user/getUserInfo').then((res) => {
        // 将来 需要进行 权限校验
          next()
        })
      } else {
        next()
      }
    }
  } else {
    // 没token的情况
    // includes 表示数组中是否包含某个元素 ，返回值是true和false
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next({
        path: '/login'
      })
      NProgress.done()
    }
  }
})

// 后置守卫
//
// 想要设置标签页的title 需要在页面进入之后进行设置
router.afterEach((to, from) => {
  // 方法1 ：
  // // document.title
  // // 格式：
  // // titleConfig.title + ' ' + to.meta.title
  // document.title = `titleConfig.title ${to.meta.title || ''}`
  // console.log(router)
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // 方法二：
  // 调用方法
  document.title = getPageTitle(to.meta.title)
  // 手动关闭进度条
  NProgress.done()
})
